<template>
	<view :class="currentTheme">
		<!-- <a-nabbar :name="item.name" :custom-back="customBack" /> -->
		<index-header :title="item.name" :offsetTop="offsetTop" :bgImg="item.image" isBack :height="contentHeight">
			<view slot="content" class="u-flex-1 u-position-relative header-container">
				<view class="u-position-relative header-content"  id="slot-content">
					<a-nabbar :isFixed="false" navBg="transparent" txtColor="white" />
					<view class="u-flex u-padding-left-32 u-padding-right-32 u-col-top ">
						<item-image :img="item.image" width="175" height="240"></item-image>
						<view class="u-flex-1 u-margin-left-24">
							<view class="text-white u-font-36 text-bold u-line-2">{{item.name || ''}}
							</view>
							<view class="tag u-flex u-flex-wrap">
								<view class="u-margin-right-10 u-margin-bottom-6"
									v-for="(c,i) in item.categoryDescription" :key="i">
									<u-tag :text="c" size="mini" shape="circle" bg-color="#765CFE"
										border-color="#765CFE" color="white" />
								</view>
							</view>
							<view class="u-flex">
								<flex-text txt="开放上车时间" size="24" width="145" customClass="text-white"></flex-text>
								<text class="u-font-24 text-white">：{{item.enrollTime | timeFormat}}</text>
							</view>
							<view class="u-flex">
								<flex-text txt="发车时间" size="24" width="145" customClass="text-white"></flex-text>
								<text class="u-font-24 text-white">：{{item.estimateTime | timeFormat}}</text>
							</view>
							<view class="u-flex">
								<flex-text txt="展会酒店地址" size="24" width="145" customClass="text-white"></flex-text>
								<text class="u-font-24 text-white u-line-1 u-flex-1" style="width: 0;">：{{item.hotelAddress||''}}{{item.hotelRoomNo||''}}</text>
							</view>
							<view class="u-flex u-margin-top-14">
								<item-image type="1" :img="item.avatar" :size="42" :fade="false" />
								<text
									class="u-font-28 u-margin-left-10 u-line-1 username-text">{{item.createName || '' }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="header-box-border u-position-absolute"></view>
		</index-header>
		<view class="u-padding-left-32 u-padding-right-32">
			<view class="box-title u-font-32 text-bold u-margin-bottom-26">发行</view>
			<item-box padding="0">
				<view class="u-padding-left-32 u-padding-right-32 u-padding-top-20 u-padding-bottom-20 u-flex">
					<item-image type="1" :img="item.avatar" size="96"></item-image>
					<view class="u-margin-left-26 u-font-30 content-desc-item u-flex-1 u-line-2">{{item.createName}}
					</view>
				</view>
			</item-box>
			<view class="box-title u-font-32 text-bold u-margin-bottom-26 u-margin-top-24">店家</view>
			<item-box padding="0">
				<view class="u-flex person-count-container u-border-bottom u-padding-left-32 u-padding-right-32">
					<u-icon name="renwu-ren" custom-prefix="index-custom-icon" size="31" color="#1a1a1a"></u-icon>
					<text class="u-font-24 u-margin-left-12">人数：</text>
					<view class="u-flex u-row-between u-flex-1">
						<view>
							<text class="u-font-40 text-color-txtTheme">{{participate}}</text>
							<text class="u-font-32">/{{item.people||0}}</text>
							<text class="u-font-24">人</text>
						</view>
						<view class="u-flex">
							<u-icon name="nan" custom-prefix="custom-icon" size="26" color="#765CFE"></u-icon>
							<text class="u-font-36 u-margin-left-10 text-color-txtTheme">{{manLen}}</text>
							<text class="u-font-30">/{{item.mpeople||0}}</text>
						</view>
						<view>
							<u-icon name="nv" custom-prefix="custom-icon" size="26"
								:color="currentThemeObj.themeSecondColor"></u-icon>
							<text class="u-font-36 u-margin-left-10 woman-class">{{womanLen}}</text>
							<text class="u-font-30">/{{item.people - item.mpeople||0}}</text>
						</view>
						<view>
							<item-btn v-if="item.isCrossTalk" width="143" height="42" bgColor="#F3EFFE">
								<text class="u-font-20 text-color-txtTheme">可反串</text>
							</item-btn>
						</view>
					</view>
				</view>
				<template>
					<view  v-if="item.userSmallDtos&&item.userSmallDtos.length">
						<u-row>
							<u-col span="3" v-for="(item,index) in item.userSmallDtos" :key="index"
								@click="getAvatarDetail(item)">
								<view class="avatar u-flex u-row-center u-position-relative">
									<view v-if="item.userType==='lock'">
										<u-icon :name="item.gender==='男' ? 'nan' : 'nv'" custom-prefix="custom-icon"
											size="46" color="#fafafa"></u-icon>
										<view class="u-position-absolute right-avatar"
											:style="{backgroundColor:item.gender==='男' ? currentThemeObj.primary:currentThemeObj.themeSecondColor}">
											<u-icon name="suo" custom-prefix="index-custom-icon"
												size="10" color="white"></u-icon>
										</view>
									</view>
									<item-image showSex type="1" :img="item.avatar" :size="124" :sex-bg-color="item.gender==='男' ? currentThemeObj.primary:currentThemeObj.themeSecondColor"
										:sexIcon="item.gender==='男' ? 'man' : 'woman'" :fade="false" v-else />
								</view>
							</u-col>
						</u-row>
						<view class="u-font-22 text-color-txtTheme u-text-center u-padding-bottom-20">点击头像可查看店家信息</view>
					</view>
					<view class="box-title u-font-24 u-text-center u-padding-32" v-else>还没有人上车</view>
				</template>
				<view v-if="item.status!==2&&isStore" class="u-padding-top-20 u-padding-bottom-20 u-padding-left-32 u-padding-right-32">
					<item-btn 
					:loading="intoCarLoading" 
					height="88" 
					width="100%" 
					:bgColor="participate==item.people ? '#999999' : currentThemeObj.primary"
					v-if="!item.isIntoCar" 
					:disabled="participate==item.people"
					@click="pushCar('confirmCar',item)">一键上车</item-btn>
					<item-btn :loading="outCarLoading" height="88" width="100%" v-if="item.isIntoCar&&!lockCarFlag" @click="closeCar('storeCancelCar',item)" >我要下车</item-btn>
				</view>
			</item-box>
			<view class="u-text-center u-font-32 u-padding-46" v-if="item.status==2">
				<text class="box-title">测本用时：</text><text class="text-color-txtTheme">{{totalTime}}</text>
			</view>
			<view class="u-margin-top-20"   v-if="isCity">
				<view class="box-title u-font-32 text-bold u-margin-bottom-26">城市速查</view>
				<item-box :padding="30">
					<view class="u-padding-top-20 u-padding-bottom-20">
						<u-row>
							<u-col :span="4" v-for="(c,i) in productCities" :key="i">
								<view class="u-margin-bottom-10">
									<item-btn height="64" type="plain" width="100%">{{c.cityName}}{{c.grantNumber}}/{{c.totalNumber}}</item-btn>
								</view>
							</u-col>
						</u-row>
					</view>
				</item-box>
			</view>
		</view>
		<u-popup v-model="avatarPopFlag" mode="center" border-radius="26" width="578" closeable>
			<view class="u-padding-40">
				<view class="u-flex ">
					<item-image :type="'1'" :img="showDetailItem.avatar" :size="100" />
					<view class="u-margin-left-20 ">
						<view class=" u-font-32 content-desc-item">{{showDetailItem.nickname}}</view>
						<view class=" u-font-22 content-desc-item u-font-28 u-margin-top-10">
							<text >信用分：</text>
							<text>{{showDetailItem.creditScore}}</text>
						</view>
					</view>
				</view>
				<view class="history-list u-flex u-margin-top-20 u-text-center text-order-time u-font-26">
					<view class="history-item u-flex-1">
						已上{{showDetailItem.inCarCount}}车</view>
					<view class="history-item u-flex-1">
						已跳{{showDetailItem.jumpCarCount}}车</view>
					<view class="u-flex-1">
						已评测{{showDetailItem.evaluationCount}}本</view>
				</view>
				<view class=" u-margin-top-30 content-desc-item u-flex u-margin-bottom-20"
					@click="copyWxId(showDetailItem.wxId)">
					<u-icon name="weixin-fill" size="35" color="#765CFE"></u-icon>
					<text class="u-margin-left-20">{{showDetailItem.wxId || '暂无'}}</text>
				</view>
				<view class="content-desc-item u-flex" @click="callPhone(showDetailItem.phone)">
					<u-icon name="dianhua" size="35" custom-prefix="custom-icon" color="#765CFE"></u-icon>
					<text class="u-margin-left-20">{{showDetailItem.phone}}</text>
				</view>
				<view class="content-desc-item u-margin-top-30">
					所在城市：{{showDetailItem.cityPath | cityPathFormat}}
				</view>
			</view>
		</u-popup>
		<model v-model="modelFlag" :show-title="false"
			:show-cancel-button="!['rejectFlag','cancelCarFlag'].includes(modelType)"
			:show-confirm-button="modelType!='confirmCar'"  cancel-color="#333333" :confirm-color="currentThemeObj.primary"
			:content="closeModalTips" @confirm="confirmClose" @cancel="clearTime" />
	</view>

</template>

<script>
	import listItem from "@/components/list-item/list-item.vue"
	import {
		getDetail,
		customRequest,
		add
	} from '@/api/crud.js'
	import dayjs from 'dayjs'
	import carManager from '@/mixins/carManager.js'
	import model from '@/components/u-modal/u-modal.vue'
	import price from '@/components/price/price.vue'
	import larpDetail from '@/mixins/larpDetailMixins.js'
	import indexHeader from '@/components/indexHeader/indexHeader.vue'
	import itemNumberList from '@/components/itemNumberList/itemNumberList.vue'
	import {pxToRpx} from '@/utils'
	export default {
		mixins: [carManager, larpDetail],
		components: {
			listItem,
			model,
			price,
			indexHeader,itemNumberList
		},
		data() {
			return {
				apiModule: 'shopApi',
				item: {
					loading: true
				},
				avatarPopFlag: false,
				customStyle: {
					backgroundColor: '#765CFE',
					borderColor: 'none'
				},
				goonDis: {
					backgroundColor: 'rgba(118,92,254,0.4)',
					borderColor: 'none'
				},
				colHeight: 0,
				option: {},
				apiType: "driveCar",
				showDetailItem: {
					cityPath: ''
				},
				pageType: "carDetail",
				lockCarFlag: false,
				offsetTop: 0,
				productCities:[],
				contentHeight:0
			};
		},
		computed: {
			isStore() {
				return this.userType !== 'issue'
			},
			totalTime() {
				const {
					completeTime,
					executeTime
				} = this.item
				const diffTime = dayjs(completeTime).unix() - dayjs(executeTime).unix()
				return this.formatTime(diffTime)
			}
		},
		onLoad(option) {
			this.option = option;
		},
		onUnload() {
			uni.$off('lockCar')
		},
		onPageScroll(e) {
			this.offsetTop = e.scrollTop
		},
		async onShow() {
			// await getDetail({
			// 	id: this.option.id
			// }, this.apiType, this.apiModule, 'thirdGet').then(data => {
			// 	this.item = data;
			// 	this.item.categoryDescription = data.categoryDescription.split(',').splice(0,6)
			// 	this.lockCarFlag = data.isLocked
			// 	this.$u.mpShare = {
			// 		title: data.name,
			// 		imageUrl: this.imgFilter(data.image)
			// 	}
			// })
			await this.getDetail();
			this.$nextTick(()=>{
				this.$u.getRect('#slot-content').then(res=>{
					const height = pxToRpx(res.height) + 60;
					this.contentHeight = height;
					console.log(contentHeight)
				})
			})
			uni.$on('lockCar', res => {
				this.setCarLock(true, res)
			})
			uni.$on('unLockCar', res => {
				this.setCarLock(false, res)
			})
			if (this.isCity) {
				getDetail({
					productId: this.item.productId
				}, 'product', this.apiModule, 'getCitys').then(data => {
					this.productCities = data;
				})
			}
		},
		methods: {
			//获取测本约车详情
			getDetail(){
				return getDetail({
					id: this.option.id
				}, this.apiType, this.apiModule, 'thirdGet').then(data => {
					this.item = data;
					this.item.categoryDescription = data.categoryDescription.split(',').splice(0,6)
					this.lockCarFlag = data.isLocked
					this.$u.mpShare = {
						title: data.name,
						imageUrl:this.imgFilter(data.image)
					}
				})
			},
			addZero(time) {
				return time < 10 ? '0' + time : time;
			},
			returnNumberList(item){
				return [{
					text:'已上车次',
					count:item.inCarCount
				},{
					text:'已跳车次',
					count:item.jumpCarCount
				},{
					text:'已评测',
					count:item.evaluationCount
				}]
			},
			formatTime(seconds) {
				// 小于等于0的话，结束倒计时
				let [day, hour, minute, second] = [0, 0, 0, 0];
				const hourNumber = 60 * 60;
				day = Math.floor(seconds / (hourNumber * 24));
				// 判断是否显示“天”参数，如果不显示，将天部分的值，加入到小时中
				// hour为给后面计算秒和分等用的(基于显示天的前提下计算)
				hour = Math.floor(seconds / hourNumber) - day * 24;
				// showHour为需要显示的小时
				let showHour = Math.floor(seconds / hourNumber);
				minute = Math.floor(seconds / 60) - hour * 60 - day * 24 * 60;
				second = Math.floor(seconds) - day * 24 * hourNumber - hour * hourNumber - minute * 60;
				// 如果小于10，在前面补上一个"0"
				showHour = this.addZero(showHour);
				minute = this.addZero(minute);
				second = this.addZero(second);
				return [showHour, minute, second].join(':')
			},
			//锁车与解锁车
			setCarLock(flag, res) {
				if (res.driveCarId == this.option.id) { //当前车才提示
					const tips = flag ? '车门已焊死，禁止用户上下车' : '车门已解锁，可正常上下车';
					// this.modelType='rejectFlag'
					// this.modelFlag = true;
					this.$u.toast(tips)
					this.lockCarFlag = flag;
				}
			},
			getAvatarDetail(item) {
				console.log(this.avatarPopFlag)
				if (item.userType == 'lock') {
					this.$u.toast('发行已锁该车位')
					return false;
				}
				console.log()
				this.avatarPopFlag = true;
				this.showDetailItem = item;
			},
			startCar() {
				add(this.loginForm.uid + '', this.apiType, this.apiModule, 'startCar/' + this.item.id).then(res => {
					this.$u.toast('发车成功');
					this.$u.route({
						url: '/pagesA/carTime/carTime',
						params: {
							id: this.item.id
						}
					})
				})
			},
			getPathDetail() {
				this.$u.route({
					url: "/pagesA/itemDetail/itemDetail",
					params: {
						id: this.item.exhibitProductId,
						productId: this.item.productId,
						type: 'detailTestReply' //参展剧本评价
					}
				})
			},
			cancelCarcallback(res) {
				if (this.item.id === res.driveCarId) {
					this.modelType = 'cancelCarFlag'
					this.modelFlag = true;
					this.closeModalTips = '该车已被取消，去换一辆吧'
				}
			},
			startCarcallback(res) {
				const userSmallIds = res.userSmallIds.split(',')
				const flag = userSmallIds.some(val => val === this.loginForm.uid);
				if (this.item.id === res.driveCarId) {
					this.modelType = !flag ? 'cancelCarFlag' : 'startCarFlag'
					this.modelFlag = true;
					this.closeModalTips = '该车已出发'
				}
			},
			//自定义返回
			customBack() {
				if ([1007, 1008].includes(this.scene)) {
					//单聊或群聊分享进入
					this.$store.dispatch('scene', null)
					this.$u.route({
						type: "reLaunch",
						url: "/pages/index/index"
					})
					return false;
				}
				this.$u.route({
					type: "back"
				})
			},
			outCar() {
				this.$u.route({
					type: "back"
				})
			},
			//拨打电话
			callPhone(phoneNumber) {
				if (!phoneNumber) return false;
				uni.makePhoneCall({
					phoneNumber
				});
			},
			//微信号
			copyWxId(wxId) {
				if (!wxId) return false;
				uni.setClipboardData({
					data: wxId,
					success: () => {
						this.$u.toast('复制成功')
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.header-box-border {
		background-color: var(--background-color);
		height: 25rpx;
		bottom: 0;
		left: 0;
		right: 0;
		border-radius: 40rpx 40rpx 0 0;
		z-index: 23;
	}

	.username-text {
		color: var(--background-second-color);
	}

	.header-container {
		height: 100%;

		&::after {
			content: '';
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			background-color: rgba($color: #000000, $alpha: 0.7);
			z-index: 21;
		}

		.header-content {
			z-index: 22;
		}
	}

	.person-count-container {
		height: 100rpx;
	}

	.padding-env {
		padding-bottom: calc(env(safe-area-inset-bottom) + 50px)
	}
	.avatar {
		width: 124rpx;
		height: 124rpx;
		border-radius: 50%;
		background-color: var(--background-second-color);
		margin: 24rpx 0 36rpx;
	}
	.right-avatar {
		top: 8%;
		right: -3%;
		width: 30rpx;
		height: 30rpx;
		text-align: center;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 1rpx solid white;
	}
	.woman-class {
		color: var(--theme-second-color);
	}
	.content {
		flex-direction: column;
		align-items: normal;
		height: 100rpx;
	}

	.left-time-title {
		width: 160rpx;
	}

	.sex-reversal {
		width: 90rpx;
		height: 34rpx;
		line-height: 34rpx;
		text-align: center;
		background: transparentize($color: #48474F, $amount: 0.5);
		border-radius: 50rpx;
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #DEDEDE;
		margin-left: 20rpx;
	}

	.history-item {
		border-right: 1px solid #9B9CC0;
	}

	
</style>
